<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网抑云音乐</title>
    <link rel="stylesheet" href="./animate.css">
    <link rel="stylesheet" href="index.css">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app-music" v-cloak>
        <div id="app-music-box">
            <!-- 搜索框开始 -->
            <div class="search-bar">
                <div class="search-bar-input">
                    <input type="text" name="" id="" v-model="keywords" @keyup.13="search" @focus="showListOn" @blur="showListOff">
                </div>
            </div>
            <!-- 搜索框结束 -->

            <!-- 内容开始 -->
            <div id="app-music-content">
                <!-- 评论开始 -->
                <div class="app-music-content-comment" ref="commentWrap" @dblclick.stop="showComment">
                    <div class="app-music-content-comment-box  flow" v-for="comment,index in hotComments" v-show="comment.show" :style="comment.position"  @dblclick.stop="closeComment(index)" v-drag.self>
                        <div class="commentWrap">
                            <div class="imageWrapper">
                                <img :src="comment.user.avatarUrl" alt="">
                            </div>
                            <span class="nick-name">
                                {{ comment.user.nickname }}
                            </span>
                            <span class="comment-content">
                                {{ comment.content}}
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 评论结束 -->
                <!-- 播放器开始 -->
                <div class="app-music-content-player">
                    <img :src="coverURL==''?'./imgs/cover.jpg':coverURL" :class="['app-music-content-player-cover',{length:!showList},{rotate:!showList&&isAudioPlaying}]"></img>
                    <div class="app-music-content-player-audio">
                        <audio ref="audio" class="audio-player" :src="musicURL" @pause="audioPause" @play="audioPlay" @timeupdate="lrcAutoPlay" @ended="resetLrc" controls autoplay loop >您的浏览器不支持 audio 标签</audio>
                    </div>
                </div>
                <!-- 播放器结束 -->
                <!-- 歌词开始 -->
                <div class="lrcBox">
                    <div class="lrcWrap" :style="{top:lrcWrapTop}">
                        <p :class="['lrcText',{current:currentLrc==index}]" v-for="item,index in lrcArr">{{ item[1] }}</p>
                    </div>
                </div>
                <!-- 歌词结束 -->
                <!-- 搜索列表开始 -->
                <div :class="['app-music-content-list',{length:!showList}]">
                    <div class="app-music-songs-list">
                        <div v-for="song,index in songs" class="app-music-songs-list-item">
                            <div class="player-audio" @click.self="playAudio(song.id)"></div>
                            <div class="player-name">{{ song.name }} - {{ song.artists[0].name }}</div>
                            <div :class="['player-mv',{hidden:song.mvid==0}]" @click.self="playMV(song.mvid)"></div>
                        </div>
                    </div>
                </div>
                <!-- 搜索列表结束 -->
            </div>
            <!-- 内容结束 -->

            <!-- 视频窗口开始 -->
            <div :class="['app-video-box',{hidden:!isVideoPlaying}]">
                <div class="app-mask"></div>
                <div class="app-video-close" @click="closeMV">×</div>
                <video ref="video" :src="videoURL" controls autoplay loop ></video>
            </div>
            <div class="background-fx">
                <iframe src="./flow_dot.html" frameborder="0" width="100%" height="100%"></iframe>
            </div>
            <!-- 视频窗口结束 -->
        </div>
    </div>
</body>
<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script src="./js/common.js"></script>
<script>
    // 阻止浏览器默认事件
    function stopDefault(e){
        if(e && e.preventDefault){
            e.preventDefault()
        }else{
            window.event.returnValue = false
            return false
        }
    }
    var app = new Vue({
        el: "#app-music",
        data: {
            songs: [],
            keywords: "热门",
            musicURL: "",
            isVideoPlaying: false,
            isAudioPlaying: false,
            videoURL: "",
            coverURL: "",
            artistName: "",
            hotComments: [],
            commentsLength: 0,
            commentCounter: -1,
            lrcArr: [], // 处理好的歌词数组
            currentLrc: 0,  // 当前歌词时间
            lrcWrapTop: "0px", // 歌词框高度,用于控制滚动
            showList: true,  // 是否显示搜索列表
        
            

        },
        mounted() {
            this.search()
        },
        methods: {
            // 搜索音乐
            search: function(){
                Axios.get("/search",{
                params:{
                        keywords:this.keywords
                    }
                }).then((res)=>{
                    this.songs = res.result.songs
                    // console.log(res.result.songs[1])
                })
            },
            // 播放音乐
            playAudio: function(id) {
                    Axios.get("/song/url",{
                    params:{
                        id: id,
                    }
                }).then((res)=>{
                    this.musicURL = res.data[0].url
                    this.isAudioPlaying = true
                    this.showList = false
                    this.lrcArr = []
                })
                // 获取歌曲详情
                Axios.get('/song/detail',{
                    params:{
                        ids:id
                    }
                }).then((res)=>{
                    this.artistName = res.songs[0].ar[0].name
                    this.coverURL = res.songs[0].al.picUrl
                })
                // 获取歌曲评论
                Axios.get("/comment/hot?type=0", {
                    params: {
                        id: id
                    }
                }).then((res) => {
                    for (i=0;i<res.hotComments.length;i++){
                        res.hotComments[i].show=false
                        res.hotComments[i].position={
                            top: "0px",
                            left: "0px"
                        }
                    }
                    this.hotComments = res.hotComments
                    this.commentsLength = res.hotComments.length
                })
                // 获取歌曲歌词
                Axios.get("./lyric",{
                    params:{
                        id:id
                    }
                }).then((res)=>{
                    this.lrcRes = ""
                    this.lrcRes = res.lrc.lyric
                    // 切割歌词，计算时间，形成数组
                    let lrcTime = this.lrcRes.split("[") // 分割每一行
                    for(i=0;i<lrcTime.length;i++){
                        let lrcTime2 = lrcTime[i].split("]")    // 分割时间和歌词
                        let lrcTime3 = lrcTime2[0].split(':')  // 分割分钟和秒钟
                        lrcTime2[0] = parseInt((lrcTime3[0]*60-0) + (lrcTime3[1]-0))  // 计算秒数，取整并赋值
                        this.lrcArr.push(lrcTime2)  // 拼到歌词数组
                    }
                    console.log(this.lrcArr)
                }).catch((err)=>{
                    console.log(err)
                })
            },
            // 轮播歌词
            lrcAutoPlay:function(){
                /*
                [by:Meurababe]
                [00:00.000] 作曲 : 陈雪凝
                [00:00.416] 作词 : 陈雪凝
                [00:01.249] 你出现
                [00:03.660] 就沉醉了时间
                [00:07.611] 没有酒
                [00:09.377] 我像个荒诞的可怜人
                [00:15.916] 可是你
                [00:17.356] 却不曾施舍二两
                [00:24.856] 你的酒馆对我打了烊
                [00:30.445] 子弹在我心头上了膛
                [00:36.238] 请告诉我今后怎么扛
                [00:41.285] 遍体鳞伤还笑着原谅
                [00:47.796] 你的酒馆对我打了烊
                */

                // 计算当前歌词索引
                this.AudioCurrentTime = parseInt(app.$refs.audio.currentTime)
                for(i=0;i<this.lrcArr.length;i++){
                    if(this.AudioCurrentTime==this.lrcArr[i][0]){
                        this.currentLrc = i // 记录当前显示歌词的索引,不会重复记录
                    }
                }

                // 计算当前歌词框的top
                if(this.AudioCurrentTime==0){
                    this.lrcWrapTop = '0px'
                }
                if(this.currentLrc>=7){
                    this.lrcWrapTop = -(this.currentLrc-7)*24 + 'px'
                }
            },
            // 歌曲结束播放,重置歌词高度
            resetLrc: function(){
                console.log("重置高度")
                this.lrcWrapTop = "0px"
            },
            // 继续播放音乐
            audioPlay: function() {
                this.isAudioPlaying = true
            },
            // 暂停播放音乐
            audioPause: function() {
                this.isAudioPlaying = false
                // this.showList = true
            },
            // 显示搜索列表
            showListOn: function(){
                this.showList = true
            },
            // 隐藏搜索列表
            showListOff: function(){
                setTimeout(function(){
                    app.showList = false
                },15)
            },
            // 播放mv
            playMV: function(mvid){
                Axios.get("/mv/url",{
                params:{
                        id:mvid
                    }
                }).then((res)=>{
                    this.videoURL = res.data.url
                })
                this.isAudioPlaying = false
                this.$refs.audio.pause()
                this.isVideoPlaying = true
            },
            // 关闭视频播放器
            closeMV: function() {
                this.$refs.video.pause()
                this.isVideoPlaying = false
            },
            // 添加评论显示
            showComment: function(e) {
                if(this.coverURL){
                    if(this.commentCounter<this.commentsLength){
                        this.commentCounter ++
                    }else if(this.commentCounter>=this.commentsLength){
                        this.commentCounter = 0
                    }
                    let el = this.$refs.commentWrap
                    let disX = e.clientX - el.offsetLeft;
                    let disY = e.clientY - el.offsetTop;
                    this.hotComments[this.commentCounter].position.top = disY -20 + 'px'
                    this.hotComments[this.commentCounter].position.left = disX - 20 +'px'
                    this.$nextTick(function(){
                        this.hotComments[this.commentCounter].show = true
                    })
                    console.log("音量"+this.$refs.audio.volume)
                    console.log("当前时间"+this.$refs.audio.currentTime+"秒")
                    console.log("总时长"+this.$refs.audio.duration+"秒")
                }else {
                    return
                }
            },
            // 关闭单条评论
            closeComment: function(i) {
                this.hotComments[i].show = false
            }
        },
        directives: {
            // 鼠标拖拽事件
            drag: function(el) {
                let dragBox = el; //获取当前元素
                dragBox.onmousedown = e => {
                    //算出鼠标相对元素的位置
                    let disX = e.clientX - dragBox.offsetLeft;
                    let disY = e.clientY - dragBox.offsetTop;
                    document.onmousemove = e => {
                        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;
                        //移动当前元素
                        dragBox.style.left = left + "px";
                        dragBox.style.top = top + "px";
                    };
                    document.onmouseup = e => {
                          //鼠标弹起来的时候不再移动
                          document.onmousemove = null;
                         //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
                        document.onmouseup = null;
                    };
                };
            }
        }
    })
</script>
</html>